<!-- 视图层 -->
<template>
  <div class='box'>
    <header class="header">
        <van-icon name="bars" />
        <van-search
         v-model="value"
         show-action
         shape="round"
         background="palevioletred"
         placeholder="请输入搜索关键词"
         @search="onSearch"
> 
  <template #action>
    <div @click="onClickButton">登录</div>
  </template>
</van-search>
    </header>
    <van-pull-refresh v-model="refreshing" 
    style="min-height: 100vh;"
    @refresh="onRefresh">
    
    <MyBanner></MyBanner>
    <MyNav></MyNav>
    <hr>
    <MyGoodsList></MyGoodsList>
    <hr>
    <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
        <MyGoodsFa :proList="proList"></MyGoodsFa>
      </van-list>
    <van-back-top right="15px" bottom="110px" 
    style="background-color: #4341413f;" />
    </van-pull-refresh>
 
   
  </div>
</template>

<!-- 逻辑层 -->
<script setup>
import MyBanner from './MyBanner.vue';
import MyGoodsFa from './MyGoodsFa.vue';
import MyGoodsList from './MyGoodsList.vue';
import MyNav from './MyNav.vue';
import { onMounted, ref } from 'vue';
import {getProList } from '@/api/home';

let proList = ref([]);

    const count = ref(3);
    const loading = ref(false);
    const refreshing = ref(false);
    const finished = ref(false)
    const contentRef = ref(null)
    const scrollTop = ref(0)
    onMounted(()=>{
      // getBannerList().then(({ data:res }) => {
        
      // })
      getProList({count:2,limitNum:10}).then(({ data:res })=>{
        proList.value = res.data;
      })
     
    });
    
    const onLoad = () => {

      getProList({
        count: count.value, limitNum:10
      }).then(({data: res }) => {
        setTimeout(() => {
          proList.value = [...proList.value, ...res.data];
          loading.value=false;
          count.value++;
          if(res.data.length == 0){
            finished.value = true;
          }
        },3000);
      });

    };

    //下拉
    const onRefresh = () => {
      getProList().then(({ data: res }) => {
        setTimeout(() => {
        // showToast('刷新成功');
        proList.value = res.data;
        refreshing.value = false;
        count.value=3;
        finished.value = false;
        
      }, 2000);
      });
    }

  

</script>



<style scoped>
 header{
    display: flex;
    position: sticky;
    top:0;
    z-index:1;
  }
  .van-icon{
    width: 45px;
    font-size: 35px;
    color: aliceblue;
    background-color: rgb(216, 112, 147);
    line-height: 55px;
    text-align: end;
  }
  .van-search{
      width: 330px;
  }
  hr{
    height: 10px;
    background-color: #ffe0e8;
  }
</style>
